<template>

  <div class="ly-wrap">
    <div class="sub-title">当前小区：{{name}}</div>
    <yd-infinitescroll :callback="getHistory" ref="infinitescrollDemo">

      <div class="list" slot="list">
        <yd-cell-group v-for="item in repairList" :key="item.id">
          <yd-cell-item>
            <span slot="left">时间</span>
            <span slot="right">{{item.createTime}}</span>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left">状态</span>
            <span slot="right" v-if="item.state==1">未处理</span>
            <span slot="right" v-if="item.state==2" style="color: red;">处理中</span>
            <span slot="right" v-if="item.state==3" style="color: green;">已处理</span>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left">故障地址</span>
            <span slot="right">{{item.address}}</span>
          </yd-cell-item>
          <yd-cell-item>
            <span slot="left">故障原因</span>
            <span slot="right">{{item.content}}</span>
          </yd-cell-item>
          <yd-cell-item v-if="item.picUrls && item.picUrls.length>0">
            <span slot="left">图片</span>
            <div slot="right">
              <div class="imgwrap" id="images" >
                <div class="img-item" v-for="(img ,index) in item.picUrls" :key="index">
                  <img :src="img" alt="图片" :preview="item.id"  >
                  <!--<div class="bg-img" :style="{backgroundImage: 'url(' + img + ')', backgroundSize:'contain'}"></div>-->
                </div>
              </div>
            </div>
          </yd-cell-item>
        </yd-cell-group>
      </div>

      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip" class="dbTips">数据加载完毕~~</span>
      <yd-icon name="more" slot="loadingTip" size=".42rem"></yd-icon>

    </yd-infinitescroll>
  </div>

</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";

  export default {

    data() {
      return {
        tab2: 0,
        name: "",
        housingId: '',
        info: {
          address: '',
          content: '',
          number: '',
        },
        imgbox: [],
        repairList: [],
        picUrls: [],
        loading: false,
        //  历史记录
        historyList: [],
        pageNum: 1,
        pageSize: 15,


      };
    },
    created: function () {
      this.init();
      this.getHistory();
    },
    methods: {


      init: function () {
        this.name = storage.getObj("housingId").name;
        this.housingId = storage.getObj("housingId").id;
      },


      getHistory: function () {
        let historyList = [];
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          housingId: storage.getObj("housingId").id,
          typeInt: 1,
        };
        http.post('/communityApps/reportms/getReport', params).then(res => {
          if (res.data.code == 20000) {
            historyList = res.data.data.list;
            this.repairList = [...this.repairList, ...historyList];
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 2000
            });
          }
          if (historyList.length < this.pageSize) {
            /* 所有数据加载完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNum++;
        });
      },





    }
  }
  ;
</script>


<style scoped lang="scss">


  .sub-title {
    color: #666;
    font-size: .28rem;
    line-height: 0.4rem;
    padding: .2rem .24rem .1rem;
  }

  .clear {
    clear: both;
  }

  .ly-photo {
    width: 100%;
    height: auto;
    background: #fff;

    .pt-wrap {
      padding: 0.36rem;
      padding-right: 0;
      padding-top: 0;
    }
    .up-wrap {
      width: 2rem;
      height: 2rem;
      display: block;
      font-size: 0;
      float: left;
      margin-right: 0.38rem;
      margin-top: 0.3rem;
      position: relative;
      .up-input {
        width: 2rem;
        height: 2rem;
        display: block;
        position: absolute;
        border: 1px dashed #ccc;
        background: url(../../assets/add.png) no-repeat center;
        -webkit-background-size: 0.4rem;
        background-size: 0.4rem;
      }
      .loading {
        width: 2rem;
        height: 2rem;
        display: block;
        background: #ccc url(../../assets/loading.png) no-repeat center;
        -webkit-background-size: 0.4rem;
        background-size: 0.4rem;
        position: absolute;
        font-size: 10px;
        color: #000;
        text-align: center;
        line-height: 3rem;
        border: 1px solid #ccc;
      }
    }

    .pt-item {
      width: 2rem;
      height: 2rem;
      border: 1px solid #ddd;
      float: left;
      margin-right: 0.38rem;
      margin-top: 0.3rem;
      text-align: center;

      .imgbox {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
      }

      img {
        max-width: 100%;
        height: auto;
      }

    }
  }

  .img-item {
    width: 2rem;
    height: 2rem;
    float: left;
    overflow: hidden;
    margin-right: 2px;
    img{
      max-width: 100%;
      height: auto;
    }
    .bg-img {
      width: 2rem;
      height: 2rem;
      background-repeat: no-repeat;
    }
  }

</style>
